<template>
  <div class="my-rent">
    <!-- 头部导航栏 -->
    <navbar-comm title="房屋管理" class="title"></navbar-comm>
    <!-- /头部导航栏 -->
    <!-------- 没有数据时的页面 ------->
    <div class="not-found-page" v-if="myRentHouse?.length === 0">
      <van-image
        width="150px"
        height="98px"
        :src="require('@/assets/imgs/not-found.png')"
        class="img"
      />
      <p class="text">
        您还没有房源，<span class="publish" @click="$router.push('/rent')"
          >去发布房源</span
        >吧~
      </p>
    </div>
    <!--------- /没有数据时的页面 ------>
    <!--------- 有数据时候的页面 ------>
    <!-- 房屋展示列表 -->
    <van-card
      v-for="(item, index) in myRentHouse"
      :key="index"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      :thumb="`http://liufusong.top:8080${item.houseImg}`"
    >
      <template #tags>
        <van-tag
          plain
          type="danger"
          class="tags"
          v-for="(tagItem, index) in item.tags"
          :key="index"
          >{{ tagItem }}</van-tag
        >
      </template>
    </van-card>
    <!-- /房屋展示列表 -->
  </div>
</template>

<script>
import NavbarComm from '@/components/NavbarComm.vue'
import { getUserMyRentHouseApi } from '@/api'
export default {
  name: '',
  components: { NavbarComm },
  props: {},
  data() {
    return {
      myRentHouse: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUserMyRentHouseFn()
  },
  methods: {
    async getUserMyRentHouseFn() {
      try {
        this.$toast.loading({
          message: '房屋数据加载中...',
          forbidClick: true
        })
        const { data } = await getUserMyRentHouseApi()
        // console.log('用户自己发布的房源：', data)
        this.myRentHouse = data.body
      } catch (err) {
        this.$toast.fail('加载失败请重试')
      }
    }
  }
}
</script>

<style scoped lang="less">
.my-rent {
  padding-top: 90px;
}
:deep(.van-nav-bar__content) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
}

.not-found-page {
  text-align: center;
  .img {
    margin: 60px 0;
  }
  .text {
    font-size: 28px;
    .publish {
      color: #21b97a;
    }
  }
}

:deep(.van-card__title) {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #394043;
}
:deep(.van-card__desc) {
  font-size: 24px;
  color: #afb2b3;
}
.tags {
  color: #39becd;
  background: #e1f5f8;
}
.van-card__price {
  font-size: 12px;
  color: #fa5741;
}
</style>
